Vue.component('add-node', {//添加栏目
    template: `<el-dialog :title="form.Level==1?'添加栏目':'添加子栏目'" :visible.sync="visibleDialog" width="700px">
    <el-form ref="contract" :model="form" :rules="rules" :inline-message="true">
        <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="栏目名称">
                <el-form-item prop="New_Type_Name">
                    <el-input v-model.trim="form.New_Type_Name" placeholder="请输入栏目名称"></el-input>
                </el-form-item>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:visible',false)">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm('contract')">提交</el-button>
    </span></el-dialog>`,
    props: ['data', 'visible'],
    data() {
        return {
            visibleDialog: false,
            form: {
                New_Type_SerialNumber: '',
                ...this.data,
                New_Type_Name: '',
            },
            rules: {
                New_Type_Name: [{ required: true, message: '请输入栏目名称', trigger: 'blur' }],
            },
            loading: false,
        }
    },
    watch: {
        visible() {
            this.visibleDialog = this.visible
        },
        visibleDialog(val) {
            this.$emit('update:visible', val)
        },
        'data.Parent_SerialNumber': function (newVal) {
            this.form.Parent_SerialNumber = newVal;
        },
        'data.Level': function (newVal) {
            this.form.Level = newVal;
        }
    },
    methods: {
        submitForm(formName) {
            const that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    that.loading = true;
                    $.ajax({
                        headers:requestHeaders(),
                        url: `${BASE_URL2}/generalBusiness/generalSave`,
                        type: 'POST',
                        data: {
                            Data: JSON.stringify({ Add: { 
                                news_type: [that.form], 
                            } })
                        },
                        success: function (res) {
                            if (res.Status === 'success') {
                                that.form = { ...that.data, Classify_Name: '', }
                                that.$message.success("提交成功")
                                that.$emit('update:visible', false)
                                that.$emit('success')
                            } else {
                                that.$message.error("提交失败，请稍后再试")
                            }
                        },
                        complete: function (XMLHttpRequest) {
                            that.loading = false
                            requestPretreatment(XMLHttpRequest);
                        },
                        dataType: "json"
                    })
                } else {
                    that.$message({
                        message: sumberError,
                        type: 'warning'
                    })
                    return false;
                }
            })
        }
    },
})
Vue.component('edit-node', {//修改栏目
    template: `<el-dialog title="修改栏目" :visible.sync="visibleDialog" width="700px">
    <el-form ref="contract" :model="form" :rules="rules" :inline-message="true">
        <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="栏目名称">
                <el-form-item prop="New_Type_Name">
                    <el-input v-model.trim="form.New_Type_Name" placeholder="请输入栏目名称"></el-input>
                </el-form-item>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:visible',false)">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm('contract')">提交</el-button>
    </span></el-dialog>`,
    props: ['id','visible'],
    data() {
        return {
            visibleDialog: false,
            form: {
                New_Type_SerialNumber:'',
                New_Type_Name:'',
            },
            rules: {
                New_Type_Name: [{ required: true, message: '请输入栏目名称', trigger: 'blur' }],
            },
            loading: false,
        }
    },
    watch: {
        visible() {
            this.visibleDialog = this.visible
        },
        visibleDialog(val) {
            this.$emit('update:visible', val)
            if (val) {
                this.loading = true,
                this.getData(this.id.New_Type_SerialNumber);
            }
        },
    },
    methods: {
        getData(New_Type_SerialNumber){
            const that = this;
            $.ajax({
                headers:requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryByTableNameWithOriginal`,
                type: 'POST',
                data: { 
                    Data: "news_type" ,
                    Condition: "New_Type_SerialNumber='" + New_Type_SerialNumber + "'"
                },
                success: function (data) {
                    if (data.length == 1) {
                        that.form = data[0];
                    }
                },
                complete: function (XMLHttpRequest) {
                    that.loading = false;
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        submitForm(formName) {
            const that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    that.loading = true;
                    $.ajax({
                        headers: requestHeaders(),
                        url: `${BASE_URL2}/generalBusiness/generalSave`,
                        type: 'POST',
                        data: {
                            Data: JSON.stringify({ 
                                Modify: { news_type: [that.form] } ,
                            })
                        },
                        success: function (res) {
                            if (res.Status === 'success') {
                                let New_Type_Name = that.form.New_Type_Name;
                                that.form =  {
                                    New_Type_SerialNumber:'',
                                    New_Type_Name:'',
                                }
                                that.$message.success("提交成功")
                                that.$emit('update:visible', false)
                                that.$emit('success',that.id,New_Type_Name)
                            } else {
                                that.$message.error("提交失败，请稍后再试")
                            }
                        },
                        complete: function (XMLHttpRequest) {
                            that.loading = false
                            requestPretreatment(XMLHttpRequest);
                        },
                        dataType: "json"
                    })
                } else {
                    that.$message({
                        message: sumberError,
                        type: 'warning'
                    })
                    return false;
                }
            })
        }
    },
})
new Vue({
    el: '#app',
    data() {
        return {
            headData:[{
                label:'栏目名称',
                prop:'New_Type_Name',
                align:'center',
            },{
                label:'栏目等级',
                prop:'Level',
                align:'center',
            }],
            form: {
                SQLSerialNumber: "P_news_type_1",
                PaginationNumber: 1,//页数
                RowAmount: 10,//每页数据条数
                Condition: '',
                ExtensionCondition: '',
            },
            total: 0,
            tableData: [],//表格数据
            row:{},
            dialogEditVisible:false,
            dialogVisible: false,
            nodeData: {//添加
                Parent_SerialNumber: '',
                Level: 1,
            },
        }
    },
    mounted() {
        $('title').text('栏目菜单');
        this.getList(this.form);
    },
    methods: {
        onSerach() {			//查询方法
            this.form.PaginationNumber = 1;
            this.getList(this.form);
        },
        updata(e,val){
            e.New_Type_Name = val;
        },
        load(tree,treeNode,resolve){
            $.ajax({
                headers: requestHeaders(),
                type: 'POST',
                url: `${BASE_URL2}/generalBusiness/generalQueryBySQLSerialNumber`,
                data:{
                    SQLSerialNumber: "P_news_type_1",
                    Condition: '',
                    ExtensionCondition: window.btoa(unescape(encodeURIComponent(" AND news_type.Parent_SerialNumber='"+tree.total+"'"))),
                },
                success: function (Result) {
                    resolve(Result)
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        Add(data) {
            if (data) {
                this.nodeData.Parent_SerialNumber = data.New_Type_SerialNumber;
                this.nodeData.Level = parseInt(data.Level) + 1;
            } else {
                this.nodeData.Parent_SerialNumber = '';
                this.nodeData.Level = 1;
            }
            this.dialogVisible = true;
        },
        Edit(row) {
            this.row = row
            this.dialogEditVisible = true;
        },
        handleSizeChange(val) {
            this.form.PaginationNumber = 1;
            this.form.RowAmount = val;
            this.getList(this.form)
        },
        handleCurrentChange(val) {
            this.form.PaginationNumber = val;
            this.getList(this.form)
        },
        getList(form) {//换页方法
            const that = this
            let data = deepClone(form);
            data.ExtensionCondition = window.btoa(unescape(encodeURIComponent(" AND Level='1'")));
            $.ajax({
                headers: requestHeaders(),
                type: 'POST',
                url: `${BASE_URL2}/generalBusiness/generalPaginationQueryBySQLSerialNumber`,
                data,
                success: function (Result) {
                    that.tableData = Result.Rows;
                    that.total = Result.TotalRows;
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        handleOperate(command,row){
            if(command=='add'){
                this.Add(row);
            } else if (command=='remove') {
                this.Remove(row)
            }
        },
        Remove(row) {
            const that = this
            this.$confirm('警告！此操作将删除该栏目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                row.Row_Status = '1';
                $.ajax({
                    headers: requestHeaders(),
                    url: `${BASE_URL2}/generalBusiness/generalSave`,
                    type: 'POST',
                    data: {
                        Data: JSON.stringify({
                            Modify: { news_type: [row] },
                        })
                    },
                    success: function (res) {
                        if (res.Status === 'success') {
                            that.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            that.getList(that.form);
                        } else {
                            that.$message.error("删除失败，请稍后再试")
                        }
                    },
                    complete: function (XMLHttpRequest) {
                        that.loading = false;
                        requestPretreatment(XMLHttpRequest);
                    },
                    dataType: "json"
                })
            }).catch(() => { });
        }
    },
})